<template>
  <el-form ref="ruleForm" :inline="inline"  :model="formData" :rules="customRules" class="demo-ruleForm"
           label-position="left" size="default" status-icon >
    <el-row :gutter="20">
      <el-col v-for="(item, index) in formObj" v-show="!item.notShow" :key="index" :span="item.width ? item.width : 24" style="margin-top: 20px;">
        <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.prop"
                      style="font-weight: 600">
          <!-- inupt输入框 -->
          <el-input v-if="item.input" v-model="formData[item.prop]" :clearable="item.clearable"
                    :disabled="item.disabled" :placeholder="item.placeholder"
                    @change="inputChange($event, index, item.prop)"
                    @input="inputINPUT($event, index, item.prop)"></el-input>
          <!-- textarea输入框 -->
          <el-input v-if="item.textarea" v-model="formData[item.prop]" :clearable="item.clearable" :disabled="item.disabled" :placeholder="item.placeholder"
                    :autosize="{ minRows: 3, maxRows: 6 }" type="textarea"></el-input>
          <!-- select选择器 -->
          <el-select v-if="item.select" v-model="formData[item.prop]" :clearable="item.clearable"
                     :disabled="item.disabled" :placeholder="item.placeholder"
                     @change="selectChange($event, index, item.prop)">
            <el-option v-for="(options, index) in item.options" :key="index" :label="options.label"
                       :value="options.value"></el-option>
          </el-select>
          <!-- select搜索框 -->
          <el-select v-if="item.searchSelect" v-model="formData[item.prop]" :clearable="item.clearable"
                     :disabled="item.disabled" :loading="searchSelectLoading" :placeholder="item.placeholder" :remote-method="(query) => remoteMethod(query, index, item.prop)" filterable
                     remote
                     reserve-keyword @change="selectChange($event, index, item.prop)">
            <el-option v-for="(items, index) in item.options" :key="index" :label="items.content"
                       :value="items.key"></el-option>
          </el-select>
          <!-- 年月日时分秒选择器 -->
          <el-date-picker v-if="item.dateTime" v-model="formData[item.prop]" :clearable="item.clearable"
                          :disabled="item.disabled" :placeholder="item.placeholder" type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss" @change="dateTimeChange"></el-date-picker>
          <!-- 年月日时分秒，开始和结束时间 -->
          <el-date-picker v-if="item.dateTimeRange" v-model="formData[item.prop]" :clearable="item.clearable"
                          :disabled="item.disabled" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
                          range-separator="至" start-placeholder="开始日期" type="datetimerange"
                          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          <!-- 时分秒选择器 -->
          <el-time-picker v-if="item.timePicker" v-model="formData[item.prop]" :clearable="item.clearable" :disabled="item.disabled"
                          :picker-options="item.options" :placeholder="item.placeholder" format="HH:mm:ss"
                          value-format="HH:mm:ss"></el-time-picker>
          <!-- 时分秒选择器，开始和结束时间 -->
          <el-time-picker v-if="item.timePickerIsRange" v-model="formData[item.prop]" :clearable="item.clearable" :disabled="item.disabled"
                          end-placeholder="结束时间" format="HH:mm:ss" is-range
                          placeholder="选择时间范围" range-separator="至" start-placeholder="开始时间"
                          value-format="HH:mm:ss"></el-time-picker>
          <!-- 年月日选择器 -->
          <el-date-picker v-if="item.datePicker" v-model="formData[item.prop]" :clearable="item.clearable"
                          :disabled="item.disabled" :placeholder="item.placeholder"
                          value-format="yyyy-MM-dd"></el-date-picker>
          <!-- 年月日选择器，开始和介绍年月日 -->
          <el-date-picker v-if="item.datePickerIsRange" v-model="formData[item.prop]" :clearable="item.clearable"
                          :disabled="item.disabled" :placeholder="item.placeholder" end-placeholder="结束日期"
                          range-separator="至" start-placeholder="开始日期" type="daterange"
                          value-format="yyyy-MM-dd"></el-date-picker>
          <!-- switch开关 -->
          <el-switch v-if="item.switch" v-model="formData[item.prop]" :disabled="item.disabled"
                     @change="formSwitchChange($event, index, item.prop)"></el-switch>
          <!-- radio单选框 -->
          <el-radio-group v-if="item.radio" v-model="formData[item.prop]" :disabled="item.disabled">
            <el-radio v-for="(options, index) in item.options" :key="index" :label="options.label"
                      :value="options.value"></el-radio>
          </el-radio-group>
          <!-- checkbox复选框 -->
          <el-checkbox-group v-if="item.checkbox" v-model="formData[item.prop]" :disabled="item.disabled">
            <el-checkbox v-for="options in item.options" :key="options.value" :label="options.label"></el-checkbox>
          </el-checkbox-group>

          <!-- 按钮 -->
          <el-button v-if="item.button" :disabled="item.disabled" :icon="item.icon" :loading="item.loading"
                     :type="item.buttonType || 'primary'" @click="buttonClick(item.prop, index)">{{ item.placeholder }}
          </el-button>
          <!-- text展示 -->
          <span v-if="item.text" v-text="formData[item.prop]"></span>
          <!-- 计量单位 -->
          <span class="left10" v-if="item.unit">{{ item.unit }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import {reactive, toRefs,} from 'vue';

export default {
  name: "YgFrom",
  props: {
    inline: {
      type: Boolean,
      default: false,
    },
    formObj: {
      type: Array,
      required: true,
    },
    customRules: {},
    formData: {
      type: Object,
      required: true,
    },
    searchSelectOptionsCb: {
      type: Array,
    },
  },
  setup(_, {emit}) {
    const data = reactive({
      dialogImageUrl: "",
      searchSelectLoading: false,
      dialogVisible: false,
      disabled: false,
      searchShow: "", //高德地图input收索联想
      setSearchVal: [], //高德地图赋值搜索内容
      ruleForm: null,
    });

    //select变化调用
    function selectChange(value, index, prop) {
      emit("selectChange", value, index, prop);
    }

    // input的input事件
    function inputINPUT(value, index, prop) {
      emit("inputINPUT", value, index, prop);
    }

    // input的change事件
    function inputChange(value, index, prop) {
      emit("inputChange", value, index, prop);
    }

    // 搜索类型select搜索
    function remoteMethod(query, index, prop) {
      if (query) {
        data.searchSelectLoading = true;
        emit("querySelectValue", query, index, prop);
        setTimeout(() => {
          data.formObj[index].options = data.searchSelectOptionsCb;
          data.searchSelectLoading = false;
        }, 500);
      } else {
        data.searchSelectOptios = [];
      }
    }

    //switch变化
    function formSwitchChange(val, index, prop) {
      emit("formSwitchChange", val, index, prop);
    }

    //时间选择器变化
    function dateTimeChange(val) {
      emit("dateTimeChange", val);
    }

    //按钮点击事件
    function buttonClick(prop, index) {
      emit("buttonClick", prop, index);
    }

    //提交时验证表单，直接在父级调用
    const submitForm = async (formEl) => {
      if (!data.ruleForm) return
      let state = false
      await data.ruleForm.validate((valid, fields) => {
        if (valid) {
          state = true
        }
      })
      return state
    }
    function resetForm() {
      data.ruleForm.resetFields();
    }

    return {
      ...toRefs(data),
      selectChange,
      inputINPUT,
      inputChange,
      remoteMethod,
      formSwitchChange,
      dateTimeChange,
      buttonClick,
      submitForm,
      resetForm
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-col {
  height: 30px;
}

::v-deep .el-input {
  width: 100%;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-date-editor {
  width: 100%;
}

// ::v-deep .el-date-editor .el-range-separator{
// 	width: 20px !important;
// }
::v-deep .el-range-editor--small.el-input__inner {
  width: 100%;
}

.el-textarea {
  width: 100%;
}

.hide {
  v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>